<template>
	<tm-fullView>
		<view class="pb-50" >
			<tm-menubars title="表单示例" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
			<tm-form
			@submit="submit"
			ref="formData"
			@request="success"
			method="post"
			url="https://mockapi.eolinker.com/Uj8WNQX0d65502098df8ecc1f06348d7aac9364b4d08923/gongyingshang/fabu">
				<tm-sheet :shadow="24" :padding="[12,24]" :margin="[24,24]">
					<view class="py-12 px-24 mx-12 round-3 border-b-1 grey text" :class="$tm.vx.state().tmVuetify.black ? 'grey-darken-4 bk' : ''">
						<text class="text-size-n text-weight-b ">车辆图片</text><text class="text-grey text-size-xs px-10">(最多可以上传8张)</text>
					</view>
					<view class="py-32 mx-12">
						<tm-upload
						 color="grey"
						 url="https://mockapi.eolinker.com/Uj8WNQX0d65502098df8ecc1f06348d7aac9364b4d08923/my/upload"
						 name="uploadImg" :filelist.sync="reqData.uploadImg" autoUpload :max="8" :grid="4"></tm-upload>
					</view>
					<view class="py-12 px-24 mx-12 round-3 border-b-1 grey text" :class="$tm.vx.state().tmVuetify.black ? 'grey-darken-4 bk' : ''">
						<text class="text-size-n text-weight-b ">产品标题设置</text><text class="text-grey text-size-xs  px-10">(好的标题容易让人搜索到哦)</text>
					</view>
					<tm-input :verify="verify"  name="title" required title="标题" v-model="reqData.title"></tm-input>
					<tm-input name="price" required title="价格" input-type="digit" v-model="reqData.price" suffix="万"></tm-input>
					<tm-pickersCity  ref="citypieek" :default-value.sync="reqData.city">
						<tm-input name="city" :border-bottom="false" required title="发布区域" placeholder="请选择城市区域" disabled :value="cityDisplay" right-icon="icon-angle-right"></tm-input>
					</tm-pickersCity>
					
					<view class="py-12 px-24 mx-12 round-3 border-b-1 grey text" :class="$tm.vx.state().tmVuetify.black ? 'grey-darken-4 bk' : ''">
						<text class="text-size-n text-weight-b ">车辆信息</text><text class="text-grey text-size-xs  px-10">(请如实填写)</text>
					</view>
					<tm-pickers :default-value.sync="reqData.chexing" rang-key="title" :list="chelianglis">
						<tm-input name="chexing"  required title="车型" placeholder="请选择车型" disabled :value="obTstr2(reqData.chexing)" right-icon="icon-angle-right"></tm-input>
					</tm-pickers>
					<tm-pickersDate  @confirm="chuchangchange" :default-value="reqData.chuchangtime">
						<tm-input disabled name="chuchangtime" required title="出厂时间" placeholder="请选择出厂时间"  :value="reqData.chuchangtime" right-icon="icon-angle-right"></tm-input>
					</tm-pickersDate>
					<tm-input name="pailiang"  input-type="number"  title="车辆排量" placeholder="请输入"  v-model="reqData.pailiang" suffix="升(L)"></tm-input>
					<tm-input name="beizu" :border-bottom="false"  :vertical="true" required :height="150" input-type="textarea" bg-color="grey-lighten-5" :maxlength="200"  title="车辆描述" placeholder="请输入,不超过200字符"  v-model="reqData.beizu" ></tm-input>
					<view class="mx-32 my-12 border-b-1  pb-12 flex-between" :class="$tm.vx.state().tmVuetify.black ? 'bk' : ''">
						<text class="text-size-n ">是否为事故车</text>
						<tm-groupradio name="shiguche" @change="shiguchechange">
							<tm-radio :name="item.title" v-for="(item,index) in shifoushiguche" :key="index" v-model="item.checked" :label="item.title"></tm-radio>
						</tm-groupradio>
					</view>
					<view class="mx-32 my-24 border-b-1  pb-24 flex-between" :class="$tm.vx.state().tmVuetify.black ? 'bk' : ''">
						<text class="text-size-n ">发布后是否立即上架</text>
						<view>
							<tm-switch v-model="reqData.shangjia"></tm-switch>
						</view>
					</view>
					<view class="mx-32 my-24 border-b-1  pb-24 flex-between" :class="$tm.vx.state().tmVuetify.black ? 'bk' : ''">
						<text class="text-size-n ">车辆评分</text>
						<view>
							<tm-rate name="pingfen" v-model="reqData.pingfen"></tm-rate>
						</view>
					</view>
					<view class="mx-32 my-24 border-b-1  pb-24 flex-between" :class="$tm.vx.state().tmVuetify.black ? 'bk' : ''">
						<text class="text-size-n ">是否置顶车辆</text>
						<view>
							<tm-groupcheckbox name="zhiding">
								<tm-checkbox v-model="reqData.zhiding"></tm-checkbox>
							</tm-groupcheckbox>
						</view>
					</view>
					<view class="mx-32 my-24 border-b-1  pb-24 flex-between" :class="$tm.vx.state().tmVuetify.black ? 'bk' : ''">
						<text class="text-size-n ">标签</text>
						<view>
							<tm-groupcheckbox name="bqm">
								<tm-checkbox :name="item.id" v-for="(item,index) in bam" :key="index" :label="item.title" v-model="item.checked"></tm-checkbox>
							</tm-groupcheckbox>
						</view>
					</view>
					<view class="mx-32 my-24 border-b-1  pb-24 flex-between" :class="$tm.vx.state().tmVuetify.black ? 'bk' : ''">
						<text class="text-size-n ">估价(万)</text>
						<view style="width: 70%;">
							<tm-slider name="gujia" :show-left="true" :show-right="true" v-model="reqData.gujia"></tm-slider>
						</view>
					</view>
					<view class="mx-32 my-24 border-b-1  pb-24 flex-between" :class="$tm.vx.state().tmVuetify.black ? 'bk' : ''">
						<text class="text-size-n ">有效时长</text>
						<view >
							<tm-stepper name="timeTep" :shadow="0" color="grey-lighten-4" v-model="reqData.timeTep"></tm-stepper>
							<text class="text-size-n pl-12">天</text>
						</view>
					</view>
					<view class="px-24">
						<tm-button navtie-type="form" theme="bg-gradient-blue-accent" block>提交数据</tm-button>
						<view class="py-32 text-size-s text-grey text-align-center">请注意资料的上传，必填项。</view>
					</view>
					
					<tm-button @click="getData" block theme="pink">手动获取表单数据,无验证</tm-button>
				</tm-sheet>
			</tm-form>
		</view>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmForm from "@/tm-vuetify/components/tm-form/tm-form.vue"
	import tmActionSheet from "@/tm-vuetify/components/tm-actionSheet/tm-actionSheet.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmInput from "@/tm-vuetify/components/tm-input/tm-input.vue"
	import tmRate from "@/tm-vuetify/components/tm-rate/tm-rate.vue"
	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	import tmLoadding from "@/tm-vuetify/components/tm-loadding/tm-loadding.vue"
	import tmCheckbox from "@/tm-vuetify/components/tm-checkbox/tm-checkbox.vue"
	import tmGroupcheckbox from "@/tm-vuetify/components/tm-groupcheckbox/tm-groupcheckbox.vue"
	import tmSlider from "@/tm-vuetify/components/tm-slider/tm-slider.vue"
	import tmStepper from "@/tm-vuetify/components/tm-stepper/tm-stepper.vue"
	import tmRadio from "@/tm-vuetify/components/tm-radio/tm-radio.vue"
	import tmGroupradio from "@/tm-vuetify/components/tm-groupradio/tm-groupradio.vue"
	import tmPickersDate from "@/tm-vuetify/components/tm-pickersDate/tm-pickersDate.vue"
	import tmPickers from "@/tm-vuetify/components/tm-pickers/tm-pickers.vue"
	import tmPickersCity from "@/tm-vuetify/components/tm-pickersCity/tm-pickersCity.vue"
	import tmUpload from "@/tm-vuetify/components/tm-upload/tm-upload.vue"
	import tmSwitch from "@/tm-vuetify/components/tm-switch/tm-switch.vue"
	export default {
		components:{tmFullView,tmSheet,tmMenubars,tmForm,tmActionSheet,tmButton,
		tmInput,tmRate,tmIcons,tmLoadding,tmGroupcheckbox,tmSlider,tmCheckbox,tmStepper,
		tmGroupradio,tmPickersDate,tmPickers,tmPickersCity,tmUpload,tmSwitch,tmRadio
		},
		data() {
			return {
				chelianglis:[
					{title:"SUV",id:21},
					{title:"面包车",id:31},
					{title:"跑车",id:41},
					{title:"轿车",id:51},
					{title:"房车",id:61},
				],
				shifoushiguche:[
					{title:"是",checked:null},
					{title:"否",checked:null},
				],
				bam:[
					{title:"超大",id:1,checked:false},
					{title:"钻石车",id:3,checked:false},
					{title:"好车",id:4,checked:false},
				],
				reqData:{
					uploadImg:[],
					title:"",
					price:"",
					city:[{text:"上海市",id:31},{text:"市辖区",id:3101},{text:"普陀区",id:310107}],
					chexing:[{title:"跑车",id:41}],
					chuchangtime:"",
					pailiang:"",
					beizu:"",
					shiguche:[],
					shangjia:false,
					pingfen:0,
					gujia:0,
					zhiding:false,
					timeTep:0,
					bqm:[]
				},
				verify:()=>{
					return (val)=>{
						return {
							check: val=='10010'?true:false,
							text: "请输入10010。"
						};
					}
				},
			}
		},
		mounted() {
			let t = this;
			setTimeout(function(){
				t.chelianglis=[
					{title:"555SUV1",id:21},
					{title:"666面包车1",id:31},
					{title:"77跑车2",id:41},
					{title:"88轿车3",id:51},
					{title:"999房车4",id:61},
				]
			},1500)
		},
		
		computed:{
			cityDisplay:function(){
				if(typeof this.reqData.city[0] ==='object'){
					let ds = [];
					this.reqData.city.forEach(item=>{
						ds.push(item.text)
					})
					return ds.join('/')
				}else if(typeof this.reqData.city[0] ==='string'){
					
					return this.reqData.city.join('/')
				}
			}
		},
		methods: {
			
			submit(e){
				
				if(e===false){
					uni.$tm.toast("请填写必填项。")
				}
			},
			async getData(e){
				let d = await this.$refs.formData.getFormData();
				uni.showModal({
					title:"数据如下",
					content:JSON.stringify(d),
					showCancel:false
				})
			},
			success(e){
				//提交成功 。
				uni.$tm.toast(e.msg)
			},
			obTstr(o){
				if(Array.isArray(o)){
					if(o.length.length===0) return "";
					return o.join(",")
				}
				return JSON.stringify(o)
			},
			obTstr2(o){
				if(Array.isArray(o)){
					if(o.length.length===0) return "";
					return o[0]?.title??""
				}
				return ''
			},
			chuchangchange(e){
				this.$set(this.reqData,'chuchangtime',e.year+"-"+e.month+"-"+e.day)
			},
			shiguchechange(e){
				if(e[0].index==0) {
					this.$set(this.reqData,"shiguche",true)
				}else{this.$set(this.reqData,"shiguche",false)}
			},
		}
	}
</script>

<style>

</style>
